Amikor táblázatról beszélünk, legtöbbünknek egy Excel táblázat jut eszünkben, amely sorokból, oszlopokból, továbbá az ezekből alkotott cellákból áll. A HTML táblázatai nem pontosan ilyenek. Ami közös bennük, hogy bizonyos információk tárolására szolgálnak, ahogyan az Excelben, a HTML-ben is tehetünk a cellákba szöveget, számot, képet, vagy bármilyen objektumot. Ezek az objektumok egymástól függetlenek, mivel mindegyik különálló cellákban található. A cellák összevonhatók mind vízszintesen, mind függőlegesen. Léteznek oszlopfejlécek, amelyek az alattuk levő adatok címsorát jelentik. Ha egy oszlopot szélesítek, vagy szűkítek, a teljes oszlopra vonatkozik a beállításom, nem csak az adott cellára. Ugyanez vonatkozik a sorok magasságára is. Minden cellának van saját margója, hogy ne a cellát határoló vonalakra írjunk rá, tehát ugyanúgy viselkedik, mint egy önálló lap lap. Lássuk, hogyan néz ez ki a gyakorlatban:

Elnézést a színes-szinkronizált-szélesvásznú táblázatért, de talán ez mutatja meg legjobban, a táblázatok tulajdonságait. Most foglaljuk össze az eddig látottakat a szokásos attribútumleírás táblázatban.

<TABLE> attribútumleírás

border	A táblázat keretének vastagságát adhatod meg vele. Ha nullát adsz, akkor a keret eltűnik!
background	Akár a <BODY> tag-nél, háttérképet adhatsz meg, csak itt a táblázatodnak, esetleg egyes celláknak.
bgcolor	A teljes táblázat, vagy egyes cellák háttérszínének megadása.
align	A teljes táblázat igazítása, lehetséges értékei a left, right és a center, azaz bal, jobb, közép.
width	A teljes táblázat szélességét adhatod meg pontokban, esetleg százalékban. A százalékos érték a böngészőterület megadott százalékát jelenti, tehát egy 100%-es méret a teljes, rendelkezésre álló szélességet hozzárendeli a táblázathoz.
height	A teljes táblázat magasságát adhatod meg pontokban és százalékban.

Biztosan észrevetted, hogy nem beszéltem a cellákon belüli igazításról. Igazából magukról a cellákról sem, a fenti 4 attribútum elsősorban (itt) a táblázatra vonatkozik. Ha látrehozunk egy táblázatot a <TABLE></TABLE> tag-ek segítségével, meglepődve láthatod, hogy bizony üres lesz a lapod. Még akkor is, ha szépen megadot a háttérszínt és a rácsok vastagságát, pl. így: <TABLE border="1" bgcolor="#ffff80" width="600" height="300"></TABLE>
Ez pedig egy 1-es keretvastagságú, középsárga hátterű, 600x300-as táblázatot hoz létre. De nem! Hasonló dologgal majd még többször találkozunk, úgyhogy próbáljuk megérteni a következőket: a létrehozott táblázat úgy viselkedik, mint egy üres objektum. Még nincsenek elemei. Ahhoz, hogy lássunk valamit belőle, legalább egy elemet meg kell határozni. A táblázat sorokból és oszlopokból áll, tehát ha látnánk valamit a táblázatból úgy, hogy még egyetlen sorunk és oszlopunk sem lenne, akkor ellentmondásba ütköznénk: a látható terület bekeretezve minimum egy sor és egy oszlop tartalommal már rendelkezne. Tehát most még semmit sem láthatunk. Akkor hozzunk létre sorokat és oszlopokat! Mindenekelőtt tervezzük meg a létrehozni kívánt táblázatot. Hány sora és hány oszlopa lesz? Ahogy a fenti táblázatot látjuk, ez egy 4 soros és soronként 3-3 oszlopos táblázat lesz. Soronként kell létrehozni, majd azon belül oszloponként.
A sorokat a TABLE ROW paranccsal hozzuk létre, HTML-ben ez a <TR> rövidítésnek felel meg. Ezzel megint csak semmit nem látunk, hiszen először a létrehozott sort oszlopokra kell bontsuk, ettől alakulnak ki a cellák. Az oszlopokat TABLE DATA-nak nevezzük, biztosan rájöttél az előzőekből, hogy ez a <TD> tag lesz. Mindkét tag-et érdemes lezárni (bár nem kötelező!), hogy lássuk, hol kezdődik és végződik egy cella:

<TABLE border="1" bgcolor="#ffff80" width="600" height="300">
   <TR>
      <TD>A cella tartalma</TD>
   <TR>
</TABLE>

Ezzel létrehoztunk egy 1 soros és 1 oszlopos táblázatot, szép sárga háttérrel, 1-es kerettel. Hogyan szúrok be több sort, vagy több oszlopot. Egyszerűen: több <TD>...</TD> és <TR>...</TR> struktúrát hozunk létre. Ne húzzuk tovább az időt, nézzük meg, vannak-e attribútumai a cella kreáló tag-eknek! Igen, vannak:

<TR> és <TD> attribútumleírás

background	A teljes sor, vagy az aktuális cella háttérképét határozhatod meg. Ha a kép nagyobb, mint a cella, akkor bizony a többi információt levágja. A kép mindig a bal felső sarokban kezdődik.
bgcolor	A teljes sor, vagy az aktuális cella háttérszínének megadása.
align	Az aktuális cella tartalmaának igazítása, lehetséges értékei a left, right és a center, azaz bal, jobb, közép.
valign	Az aktuális cella függőleges igazítása, lehetséges értékei a top, bottom és a middle, azaz fent, lent, középen.
width	Az oszlop szélességét adhatod meg pontokban, esetleg százalékban. A százalékos érték a táblázat sorának megadott százalékát jelenti, tehát egy 100%-es méret a teljes, még rendelkezésre álló oszlopszélességet hozzárendeli az aktuális oszlophoz. Figyeljünk arra, hogy a HTML bizonyos esetekben felülbírálja döntésünket, a tartalmat előtérbe helyezi a méretezéssel szemben. (Pl. nem lehet 0% egy oszlop, ha van benne tartalom!)
height	A sor magasságát adhatod meg pontokban és százalékban. Ha nem adunk meg szélesség és magasság attribútumokat, akkor a HTML a tartalomnak megfelelően állítja be ezeket.
NOWRAP	Az egyik leghasznosabb, mégis igen ritkán használt attribútum. Segítségével megakadályozhatjuk, hogy a cellába beírt szöveget a kliens automatikusan megtörje (több sorba írja). Ez főleg akkor szokott előfordulni, ha a képernyő alacsony felbontásban működik és kicsi a böngészőfelület. Ilyenkor lép működésbe az automatikus sortörés, hogy a megadott szélességértékeket tudja tartani a HTML oldal. A NOWRAP-nak nincs semmilyen értéke, tehát nincs jobb oldala, ebből következőleg pedig nincs egyenlőségjel sem. Csak akkor használjuk, ha a szélességeket nem akarjuk pontosan beállítani, mert ilyenkor a kliens olyan szélesre méretezi az oszlopokat, hogy beleférjen a tartalom egy sorba!

Végül lássuk, hogyan működik a gyakorlatban. Mit érdemes megfigyelned? Csak egy 3x3-as táblarészt készítettem el, a fejlécsort majd a következő tananyagrészben tárgyaljuk. Figyeld meg azt is, hogy csak az első sor <TD>-inek adtam szélességet, hiszen nem a cella, hanem az egész oszlop szélsességét meghatároztam ezzel az egy attribútum leírással. Ennek megfelelően az egyes sorok függőleges igazítását csak a <TR> tag-eknél adtam meg, minden egyes celláknál ezt fölösleges beállítani, hiszen így is az egész sorra vonatkozik. Kattints a nagyítóra, hogy lásd az eredményt. Íme a forrás: